<template>
  <div>
    <a-button type="primary" @click="showModal">
      添加分类
    </a-button>
    <a-table :columns="columns" :data-source="data" bordered :pagination="false">
      <span slot="status" slot-scope="text,record">
        <a-switch :default-checked="record.status" @change="onChange(record.id)" />
      </span>
      <span slot="createTime" slot-scope="createTime">
        {{createTime}}
      </span>
      <span slot="action" slot-scope="text, record">
      <a-divider type="vertical" />
      <a @click="deleteById(record.id)">删除</a>
      <a-divider type="vertical" />
      <a-dropdown :trigger="['click']">
        <a class="ant-dropdown-link" @click="e => e.preventDefault()">
          更多<a-icon type="down" />
        </a>
        <a-menu slot="overlay">
          <a-menu-item key="0" sl>
            <a @click="updateCate(record)">修改信息</a>
          </a-menu-item>
          <a-menu-divider />
        </a-menu>
      </a-dropdown>
    </span>
    </a-table>

    <!--添加分类-->
    <div>
      <a-modal
          title="添加类别"
          :visible="visible"
          :confirm-loading="confirmLoading"
          @ok="handleOk"
          @cancel="handleCancel"
      >
        <a-form-model  :model="name" v-bind="layout">
          <a-form-model-item has-feedback label="类别" prop="code">
            <a-input v-model="name" type="text" autocomplete="off" />
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>

    <!--修改分类-->
    <div>
      <a-modal
          title="修改类别"
          :visible="updateState"
          :confirm-loading="confirmLoading"
          @ok="updateOk"
          @cancel="updateFail"
      >
        <a-form-model  :model="cateVo.name" v-bind="layout">
          <a-form-model-item has-feedback label="类别" prop="code">
            <a-input v-model="cateVo.name" type="text" autocomplete="off" />
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>
  </div>
</template>

<script>
import {addCate, deleteCateById, getCateById, getCates, updateInfo, updateStatus} from "../../../services/cates";

const columns = [
  {
    title: '分类名称',
    key: 'name',
    dataIndex: 'name'
  },
  {
    title: '分类状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' },
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    scopedSlots: { customRender: 'createTime' },
  },

  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
  },
];

const data = [];
export default {
  name: "Category",
  data(){
    return {
      data,
      columns,
      visible:false,
      confirmLoading:false,
      name:'',
      cateVo:{
        id:'',
        name:''
      },
      updateState:false
    }
  },
  created() {
    this.getAllCates()
  },
  methods:{
    getAllCates(){
      getCates().then(result=>{
        this.data = result.data.data
      })
    },
    showModal(){
      this.visible = true
    },
    handleOk(e) {
      console.log(e)
      addCate(this.name).then(result=>{
        if (result.data.code === 0){
          this.confirmLoading = true;
          setTimeout(() => {
            this.visible = false;
            this.confirmLoading = false;
            this.getAllCates()
          }, 2000);
          this.$message.success(result.data.msg,3)
        }else {
          this.$message.error(result.data.msg,3)
        }

      })
    },
    handleCancel(e) {
      console.log(e)
      console.log('Clicked cancel button');
      this.visible = false;
    },
    onChange(checked){
      updateStatus(checked).then(result=>{
        if (result.data.code === 0){
          this.$message.success(result.data.msg,3)
          this.getAllCates()
        }else {
          this.$message.error(result.data.msg,3)
        }
      })
    },
    deleteById(id){
      deleteCateById(id).then(result=>{
        if (result.data.code === 0){
          this.$message.success(result.data.msg,3)
          this.getAllCates()
        }else {
          this.$message.error(result.data.msg,3)
        }
      })
    },
    updateCate(record){
      getCateById(record.id).then(result=>{
        if (result.data.code === 0){
          this.cateVo.id = result.data.data.id
          this.cateVo.name = result.data.data.name
          this.updateState = true
        }
      })
    },
    updateOk(){
      updateInfo(this.cateVo.id,this.cateVo.name).then(result=>{
        if (result.data.code === 0){
          this.$message.success(result.data.msg,3)
          this.getAllCates()
          this.updateState = false
        }else {
          this.$message.error(result.data.msg,3)
        }
      })
    },
    updateFail(){
      this.updateState = false
    }
  }
}
</script>

<style scoped>

</style>
